<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查看聚会安排</title>
	<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
	<link rel="stylesheet" type="text/css" href="../css/main-page.css" />
	<script type="text/javascript" src="../easyui/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../js/win.js"></script>
	<script type="text/javascript">
		
		function initMeetingPlans(){
			var date = '';
			var type = '';
			var meetingPlace = '';
			$("td").each(function(){
				date = $(this).attr("dt");
				type = $(this).attr("type");
				meetingPlace = $(this).attr("meetingPlace");
				var _this = this;
				$.ajax({
					   type: "POST",
					   url: "../meetingPlan/initMeetingPlan.do",
					   dataType: "json",
					   data : {date:date, type:type, meetingPlaceId:meetingPlace },
					   success: function(users){
						   var dragContent = "";
					   		for(var i = 0; i < users.length; i++){
					   			dragContent += users[i].name +",";
					   		}
					   		if(users.length > 0){
					   			dragContent = dragContent.substring(0, dragContent.length - 1);
					   		}
					   		$(_this).append(dragContent);
					   }
					});
			});
		}
	
		function initMonth(){
			$("#month").combobox({
				onSelect : function(record){
					parent.setFrameSrc("../meetingPlan/initPlanPage.do?opt=view&month="+record.value);
				}
			});
		}
		
		$(function(){
			$("#month").combobox("setValue", '<s:property value="month"/>' );
			initMeetingPlans();
			initMonth();
		});
	</script>
	<style type="text/css">
		table{
			width: 100%;
        	border-collapse: collapse;
        	cellspacing:0;
		}
		th{
			border: 1px solid #9DB3C5;
			font-weight: normal;
			text-align: center;
			background-color:#e8f3fd;
			height: 25px;
		}
		td{
			border: 1px solid #9DB3C5;
			text-align: center;
			height: 30px;
			width: 95px;
		}
	</style>
</head>
<body class="easyui-layout">
	<div data-options="region:'center',border:false" style="padding: 5px" id="dropArea">
		<table>
			<thead>
				<tr>
					<th rowspan="2" width="80px">时间</th>
					<s:iterator value="meetingPlaces">
						<th colspan='<s:property value="types.size"/>'>
							<s:property value="place"/>
						</th>
				 	</s:iterator>
				 </tr>
				 <tr>
				 	<s:iterator value="meetingPlaces" var="mp">
						<s:iterator value="types">
							<th><s:property value="key"/></th>
						</s:iterator>
				 	</s:iterator>
				 </tr>    
			</thead>
			<tbody>
				<s:iterator value="dates" var='d'>
					<tr>
						<th><s:property /></th>
						<s:iterator value="meetingPlaces" var='mp'>
							<s:iterator value="types" var='t'>
								<td meetingPlace='<s:property value="#mp.id"/>' 
									type='<s:property value="#t.value"/>' 
									dt='<s:property value="#d"/>'></td>	
							</s:iterator>
				 		</s:iterator>
					</tr>
				</s:iterator>
			</tbody>
		</table>
	</div>
	<div data-options="region:'north'" class='fm-btn' style="text-align: left;">
		<select class="easyui-combobox" id="month"
			data-options="panelHeight: 'auto'" style="width: 150px">
			<option value="0">一月</option>
			<option value="1">二月</option>
			<option value="2">三月</option>
			<option value="3">四月</option>
			<option value="4">五月</option>
			<option value="5">六月</option>
			<option value="6">七月</option>
			<option value="7">八月</option>
			<option value="8">九月</option>
			<option value="9">十月</option>
			<option value="10">十一月</option>
			<option value="11">十二月</option>
		</select>
	</div>
</body>
</html>